<ng-container *ngIf="(selectedMail$ | async) as selectedMail">
    <!--
    TODO drop "level" support as ProtonMail doesn't support nested/tree-like conversations (Tutanota does)
    -->

    <ng-container *ngIf="selectedMail.rootNode.summary.size > 1">
        <div
            *ngFor="let rootNode of [selectedMail.rootNode]"
            [collapse]="((conversationCollapsed$ | async) || false)"
            class="flex-column root-node-container"
        >
            <ng-container
                *ngIf="!(conversationCollapsed$ | async)"
                [ngTemplateOutletContext]="{nodes: [rootNode], level: 0}"
                [ngTemplateOutlet]="nodesTemplate"
            ></ng-container>
        </div>
    </ng-container>

    <ng-template
        #nodesTemplate
        let-level="level"
        let-nodes="nodes"
    >
        <ng-container *ngFor="let node of nodes">
            <ng-container
                *ngIf="!isEmptyNodes(nodes)"
            >
                <electron-mail-db-view-mail
                    (click)="selectConversationMail(node.mail)"
                    *ngIf="node.mail"
                    [mail]="node.mail"
                    [ngClass]="{'selected': node.mail.pk === selectedMail.conversationMail?.pk}"
                    [ngStyle]="{'margin-left': level + 'em'}"
                ></electron-mail-db-view-mail>
            </ng-container>
            <ng-container
                [ngTemplateOutletContext]="{nodes: node.children, level: level + (isEmptyNodes(nodes) ? 0 : 0.75)}"
                [ngTemplateOutlet]="nodesTemplate"
            ></ng-container>
        </ng-container>
    </ng-template>

    <div class="d-flex controls">
        <button
            (click)="toggleConversationCollapsing()"
            *ngIf="selectedMail.rootNode.summary.size > 1"
            class="btn btn-sm btn-secondary-light mr-2"
            type="button"
        >
            Conversation ({{ selectedMail.rootNode.summary.size }})
        </button>
        <button
            (click)="selectMailOnline()"
            [disabled]="(selectingMailOnline$ | async) || !(onlineAndSignedIn$ | async)"
            class="btn btn-sm btn-primary mr-2"
            type="button"
        >
            <i *ngIf="selectingMailOnline$ | async" class="fa fa-spinner fa-pulse fa-fw"></i>
            View in Proton UI
        </button>
        <electron-mail-db-view-mails-export
            [dbAccountPk]="dbAccountPk"
            [rootConversationNode]="selectedMail.rootNode"
            [titleSuffix]="selectedMail.rootNode.summary.size ? '(' + selectedMail.rootNode.summary.size + ')' : ''"
            [title]="'Export'"
        ></electron-mail-db-view-mails-export>
    </div>

    <div class="d-flex">
        <h5>{{ selectedMail.conversationMail.subject }}</h5>
    </div>

    <div class="addresses pb-2 mb-2">
        <div class="badge mr-2">
            {{ selectedMail.conversationMail.sentDate | date:'medium' }}
        </div>
        <div class="badge mr-2">
            Sender:
            <ng-container
                [ngTemplateOutletContext]="{address: selectedMail.conversationMail.sender}"
                [ngTemplateOutlet]="addressTemplate"
            ></ng-container>
        </div>
        <div
            *ngIf="selectedMail.conversationMail.toRecipients.length"
            class="badge flex-row mr-2"
        >
            To:
            <ng-container
                *ngFor="let address of selectedMail.conversationMail.toRecipients"
                [ngTemplateOutletContext]="{address: address}"
                [ngTemplateOutlet]="addressTemplate"
            ></ng-container>
        </div>
        <div
            *ngIf="selectedMail.conversationMail.ccRecipients.length"
            class="badge flex-row mr-2"
        >
            Cc:
            <ng-container
                *ngFor="let address of selectedMail.conversationMail.ccRecipients"
                [ngTemplateOutletContext]="{address: address}"
                [ngTemplateOutlet]="addressTemplate"
            ></ng-container>
        </div>
        <div
            *ngIf="selectedMail.conversationMail.bccRecipients.length"
            class="badge flex-row mr-2"
        >
            Bcc:
            <ng-container
                *ngFor="let address of selectedMail.conversationMail.bccRecipients"
                [ngTemplateOutletContext]="{address: address}"
                [ngTemplateOutlet]="addressTemplate"
            ></ng-container>
        </div>
        <ng-template
            #addressTemplate
            let-address="address"
        >
            <div class="address d-inline-block">
                <a
                    class="prevent-default-event"
                    href="mailto:{{ address.address }}"
                >{{ address.name || address.address }}</a>
            </div>
        </ng-template>
    </div>

    <div *ngIf="selectedMail.conversationMail.failedDownload as failedDownload">
        <div class="alert alert-danger mb-2">
            Failed to decrypt the email body content:
            <ul>
                <li><strong>App version</strong>: {{ failedDownload.appVersion }}</li>
                <li><strong>Date</strong>: {{ failedDownload.date | date:'medium' }}</li>
                <li><strong>Error message</strong>: <span [innerText]="failedDownload.errorMessage"></span></li>
                <li><strong>Error stacktrace</strong>: <span [innerText]="failedDownload.errorStack"></span></li>
            </ul>
        </div>
        <button
            (click)="reDownload()"
            [disabled]="!(onlineAndSignedIn$ | async) || (fetchingSingleMailParams$ | async) || false"
            class="btn btn-sm btn-secondary-light"
        >
            <i *ngIf="fetchingSingleMailParams$ | async" class="fa fa-spinner fa-pulse fa-fw"></i>
            Redownload the Email
        </button>
    </div>

    <div class="body-container d-flex flex-grow-1"></div>

    <div
        *ngIf="selectedMail.conversationMail.attachments.length"
        class="attachments pt-2 mt-2"
    >
        <div
            *ngFor="let attachment of selectedMail.conversationMail.attachments"
            class="attachment badge mr-2"
        >
            {{ attachment.name }}
            <span *ngIf="attachment.size">({{ attachment.size }})</span>
        </div>
    </div>
</ng-container>
